import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { IndexBar, List } from 'antd-mobile'
import axios from '../../api/axios'
function Index(type) {
    const [Citylst, setCitylst] = useState([])
    const [Hotlst, setHotlst] = useState([])
    let getlist = async () => {
        const res = await axios.get('/api/city')
        console.log(res);
        const { code, data } = res.data
        if (code == 200) {
            setCitylst(data.city)
            setHotlst(data.hotCities)
        }

    }
    useEffect(() => {
        getlist()
    }, [])
    return (
        <div>
            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {Citylst.length > 0 && Citylst.map((item, index) => {
                        return (
                            <IndexBar.Panel
                                index={item.initial}
                                title={`${item.initial}`}
                                key={`${item.initial}`}
                            >
                                <List>
                                    {item.list.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}

export default Index
